<script setup>
import { ref, onMounted, nextTick } from 'vue'

const props = defineProps({
  onChange: Function,
  placeholder: String,
  type: {
    type: String,
    default: 'text',
  },
  values: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const content = ref('')
onMounted(() => {
  console.log('props.value', props.values)
  nextTick(() => {
    if(props.values) {
      content.value = props.values
    }
  })
})
</script>

<template>
  <div>
    <input
      v-model="content"
      @change="onChange"
      type="text"
      :disabled="disabled"
      :maxlength="50"
      :placeholder="placeholder"
      class="border-1 border-slate-200 rounded-md w-full h-[40px] px-4 focus:outline-1 focus:outline-[#4757d1]" />
  </div>
</template>

<style scoped lang="scss"></style>
